<template lang="pug">
  el-card.libaryWrapper(shadow="never" :bodyStyle="{padding: '30px'}" :border="false" style="border: none")
    template(v-if="$route.path === '/operative/archives'")
      .table-operator.tr
        el-button.gradientVertical(size="large" round @click="addHandle()") 新增
      div.mt30(v-loading="loading")
        el-row(:gutter="30" v-if="list.length > 0")
          el-col(v-for="(item, index) in list" :md="8" :lg="6" :key="item.typeCode")
            .documentItem(class="course")
              .media(@click="goInfo(item.id)")
                a-image(:url="item.cover" width="100%" height="230px" :preview="false")
                .btn-box
                  el-button(icon="el-icon-edit" circle @click.stop="addHandle(item.id, 'edit', item)" style="background-color:#C6C0BB")
                  el-button(icon="el-icon-delete" circle @click.stop="delHandle(item.id)" style="background-color:#C6C0BB")
              h3 {{item.title}}
        p.mt30.tr
          i-pagination(
            v-bind="pagination"
            @pagination="values => getList({ ...values, ...filterData })"
          )
        empty(v-if="list.length === 0")
      add-drawer(:visible.sync="addObj.visible" :id="addObj.id" :type="addObj.type" :info="addObj.info" @getList="getList")
    router-view(v-else)
</template>
<script>
import { mapGetters } from 'vuex'
import AImage from '@/components/Basic/Image'
import { getList, deleteDir } from './api'
import IPagination from '@/components/Basic/Pagination'
import AddDrawer from './components/addDrawer'

export default {
  components: {
    IPagination,
    AImage,
    AddDrawer
  },
  data () {
    return {
      loading: false,
      list: [],
      pagination: {
        total: 0,
        pageSize: 8,
        pageNum: 0
      },
      filterData: {},
      addObj: {
        id: '',
        type: 'add',
        visible: false,
        info: null
      }
    }
  },
  computed: {
    ...mapGetters(['curArea'])
  },
  created () {
    this.getList()
  },
  methods: {
    searchHandle (values) {
      this.filterData = values
      this.getCourses({
        ...values,
        pageNum: 1
      })
    },
    getList (values) {
      const { curArea, pagination } = this
      const { pageSize, pageNum } = pagination
      this.loading = true
      getList({ type: 0, areaId: curArea.areaId, pageSize, pageNum, ...values }).then(res => {
        this.pagination = {
          total: res.totalElements,
          pageNum: res.number,
          pageSize: pageSize
        }
        this.list = res.content || []
      }).finally(() => {
        this.loading = false
      })
    },
    goInfo (id) {
      this.$router.push({
        path: '/operative/archives/info',
        query: {
          dirId: id
        }
      })
    },

    addHandle (id = '', type = 'add', info = null) {
      this.addObj = {
        id,
        type,
        visible: true,
        info
      }
    },
    delHandle (id) {
      this.$confirm('确认要删除该档案吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteDir({ id }).then(res => {
          console.log(res)
          this.getList()
        })
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.btn-box{
  ::v-deep{
    i{
      color: #fff !important;
    }
  }
}
.documentItem{
  margin: 0;
  margin-bottom: 30px;

  .media{
    position: relative;
    overflow: hidden;
    transition:all ease 0.5s;
    cursor: pointer;

    .btn-box{
      position: absolute;
      right: 10px;
      bottom: 10px;
    }

    &:hover{
      transform: scale(1.1)
    }
  }

  h3{
    font-size: 17px;
    font-family: PingFang SC;
    font-weight: bold;
    color: #333333;
    line-height: 24px;
  }
}
</style>
